<template>
  <Table :columns="columns" :scroll="{ x: 600, y: contentHeight - 40 }" :pagination="false" :data-source="bonus" size="small" bordered></Table>
</template>
<script setup>
  import { ref, watchEffect, inject, reactive } from 'vue';
  import { Table } from 'ant-design-vue';
  import { friendlyDate } from '@/libs/helpers.js';

  const props = defineProps({
    code: {
      type: String
    },
    contentHeight: {
      type: Number
    }
  });

  const columns = reactive([
    {
      title: '序号',
      width: 50,
      align: 'center',
      customRender: ({ record, index }) => {
        return index + 1;
      }
    },
    { title: '报告期', width: 80, dataIndex: 'dividend_year' },
    { title: '方案', width: 150, dataIndex: 'plan_explain' },
    { title: '股权登记日', width: 90, customRender: ({ record }) => friendlyDate(record.equity_date) },
    { title: '除权除息日', width: 100, customRender: ({ record }) => friendlyDate(record.ashare_ex_dividend_date) },
    { title: '派息日', width: 100, customRender: ({ record }) => friendlyDate(record.dividend_date) },
  ]);

  const $http = inject('$http');

  const bonus = ref([]);

  async function loadBonus() {
    if (!props.code) {
      return;
    }

    let rs = await $http.get(`/api/shares/${props.code}/bonus`);

    bonus.value = rs.data.items;
  }

  watchEffect(() => {
    loadBonus();
  });
</script>
